<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>日历-calendar-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
		.calendar{
            width:350px;
            margin:0 auto 20px;
            color:#333;
        }
        .calendar table{
            width:100%;
            table-layout:fixed;
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
        }
        .calendar caption{
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #ebebeb;
            margin-bottom: 5px;
        }
        .calendar caption span{
            margin: 0 10px;
        }
        .calendar caption a{
            color:#666;
            margin:0 5px;
            text-decoration: none;
        }
        .calendar td,.calendar th{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .calendar td span{
            display: block;
            width: 30px;
            margin: 0 auto;
            cursor: pointer;
        }
        .calendar .widget-back{
            float: right;
        }
        .calendar .widget-today span{
            font-weight: bold;
        }
        .calendar .widget-disabled span{
            color:#999;
        }
        .calendar .widget-highlight span{
            background: #f7b82e;
            color:#fff;
            border-radius: 30px;
        }
        .calendar .widget-active span{
            background: #39c;
            color:#fff;
            border-radius: 30px;
        }
	</style>
	<script type="text/javascript" src="../code/calendar.js"></script>
</head>
    <body>
    	<div class="header">
            <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
        <div class="main">
            <div class="calendar calendar1"></div>
            <div class="code">
                <p>今天到明年元旦可选，选择一个区间</p>
<pre>
var year = (new Date()).getFullYear() + 1;
new calendar('.calendar1', {
    limitRange: [
        ['today', year + '0101']
    ],
    isRange: true
});
</pre>
            </div>
            <script type="text/javascript">
                var year = (new Date()).getFullYear() + 1;
                new calendar('.calendar1', {
                    limitRange: [
                        ['today', year + '0101']
                    ],
                    isRange: true
                });
            </script>
            <div class="calendar calendar2"></div>
            <div class="code">
                <p>选择某一天</p>
<pre>
new calendar('.calendar2', {
    'onSelect': function(range) {
        alert('你选择了' + range[0]['year'] + '-' + range[0]['month'] + '-' + range[0]['day']);
    }
});
</pre>
            </div>
            <script type="text/javascript">
                new calendar('.calendar2', {
                    'onSelect': function(range) {
                        alert('你选择了' + range[0]['year'] + '-' + range[0]['month'] + '-' + range[0]['day']);
                    }
                });
            </script>
            <div class="calendar calendar3"></div>
            <div class="code">
                <p>指定日期高亮显示，如：当前月份的15和16号</p>
<pre>
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var string = year + (month > 9 ? month : '0' + month);
new calendar('.calendar3', {
    highlightRange: [
        [string + '15', string + '16']
    ]
});
</pre>
            </div>
            <script type="text/javascript">
                var today = new Date();
                var year = today.getFullYear();
                var month = today.getMonth() + 1;
                var string = year + (month > 9 ? month : '0' + month);
                new calendar('.calendar3', {
                    highlightRange: [
                        [string + '15', string + '16']
                    ]
                });
            </script>
            <div class="example">
                <div class="call">
                    <h1>调用方法：</h1>
                    <p>new calendar("selector",options);</p>
                </div>
                <h2>options参数</h2>
                <table>
                    <thead>
                        <tr>
                            <th width="150">参数</th>
                            <th width="80">默认值</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>prefix</td>
                            <td>'widget'</td>
                            <td>生成日历的class前缀</td>
                        </tr>
                        <tr>
                            <td>isRange</td>
                            <td>false</td>
                            <td>是否选择范围</td>
                        </tr>
                        <tr>
                            <td>limitRange</td>
                            <td>[]</td>
                            <td>有效选择区域的范围(可以为多区间),如[['20150501','20151001']],'today'表示今天</td>
                        </tr>
                        <tr>
                            <td>highlightRange</td>
                            <td>[]</td>
                            <td>指定日期范围高亮(可以为多区间),如[['20150501','20151001']],'today'表示今天</td>
                        </tr>
                        <tr>
                            <td>onChange(day)</td>
                            <td>[空]</td>
                            <td>当前选中月份修改时触发,day为当月第一天,包含月份及年份信息</td>
                        </tr>
                        <tr>
                            <td>onSelect([start,end])</td>
                            <td>[空]</td>
                            <td>选择日期时触发,start为开始时间,end为结束时间,包含月份及年份信息</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
